<template>
    <div class="window" id="mapPath">
        <div class="title" style="background: #14274c;">
            路径规划
        </div>
        <div class="body" ref="mapFun">
			<div id="mapContainer"></div>
			<div class="map-view">
				<div class="up-view">
					<img @click="exchangeEvent" src="../assets/images/ub.png" alt="">
					<div class="input-view">
						
						<el-input class="el-input el-input-border " @input="startInputEvent" v-model="startAddress" placeholder="请输入开始地址" >
							<i slot="prefix" class="el-icon-location el-input__icon el-input__prefix_0" ></i>
							<i slot="suffix" class="el-icon-error el-input__icon" @click="startEvent"></i>
						</el-input>
						<el-input class="el-input" v-model="endAddress" @input="endInputEvent" placeholder="请输入结束地址" prefix-icon="">
							<i slot="prefix" class="el-icon-location el-input__icon el-input__prefix_1" ></i>
							<i slot="suffix" class="el-icon-error el-input__icon" @click="endEvent"></i>
						</el-input>
						
					</div>
					<el-button type="primary" class="searchBtnEvent" @click="searchEvent">搜索</el-button>
				</div>
				<div class="bottom-view" v-if="duration">
					<div style="flex: 1;">方案1</div>
					<div class="">{{duration}}</div>
					<div class="time"></div>
					<div>{{distance}}</div>
				</div>
			</div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
	var map,marker,polylineLayer
    export default {
        data () {
            return {
				startAddress: '',
				endAddress: '',
				startLocation: '',
				endLocation: '',
				startLatLng: [],
				endLatLng: [],
				duration: '',
				distance:'',
			}
        },
		created() {
			// 
			
		},
		mounted() {
			//初始化地图
			map = new TMap.Map('mapContainer', {
				center: new TMap.LatLng(23.18139,113.48067),//地图显示中心点
				zoom:14	//缩放级别
			});
			
			this.initMap('', '')

		},
		methods: {
			searchEvent() {
				if (this.startLocation && this.endLocation) {
					// polylineLayer.setGeometries(this.startLatLng)
					// marker.setGeometries()
					this.initMap(this.startLocation, this.endLocation)
				}
			},
			endInputEvent(e) {
				let body = {
					address: e,
					output: 'jsonp',
					key: 'I7JBZ-VRDKU-Z2WVU-26U37-KVWIV-QVFK7'
				}
				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/',body).then(res => {
					// console.log('结束',res)
					if (res.status === 0) {
						this.endLatLng[0] = res.result.location.lat
						this.endLatLng[1] = res.result.location.lng
						this.endLocation = res.result.location.lat + ',' + res.result.location.lng
						console.log('结束', this.endLocation)
						
					}
				}).catch(err => {
					console.log(err)
				})
			},
			startInputEvent(e) {
				console.log(e)
				let body = {
					address: e,
					output: 'jsonp',
					key: 'I7JBZ-VRDKU-Z2WVU-26U37-KVWIV-QVFK7'
				}
				// let body = {
				// 	boundary: 'region(广州, 0)',
				// 	page_size: 10,
				// 	page_index: 1,
				// 	keyword: e,
				// 	orderby: '_distance',
				// 	output: 'jsonp',
				// 	key: 'I7JBZ-VRDKU-Z2WVU-26U37-KVWIV-QVFK7'
				// }
				this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1/',body).then(res => {
					
					if (res.status === 0) {
						this.startLatLng[0] = res.result.location.lat
						this.startLatLng[1] = res.result.location.lng
						this.startLocation = res.result.location.lat + ',' + res.result.location.lng
						console.log('开始', this.startLocation)
						// if (this.startLocation && this.endLocation) {
						// 	this.initMap(this.startLocation, this.endLocation)
						// }
					}
				}).catch(err => {
					console.log(err)
				})
			},
			initMap(s, e){
				
				let body = {
					from: s,
					to: e,
					policy: 'LEAST_TIME',
					output: 'jsonp',
					// callback: 'cb',
					key: 'I7JBZ-VRDKU-Z2WVU-26U37-KVWIV-QVFK7'
				}
				this.$jsonp('https://apis.map.qq.com/ws/direction/v1/driving/',body).then(res => {
					
					this.onDraw(res)
					this.duration = res.result.routes[0].duration > 60 ? res.result.routes[0].duration / 60 + '小时' : res.result.routes[0].duration + '分钟'
					this.distance = res.result.routes[0].distance > 1000 ? res.result.routes[0].distance / 1000 + '公里' : res.result.routes[0].distance + '米'
				}).catch(err => {
					console.log(err)
				})
			    
			},
			onDraw(ret) {
				// map = new TMap.Map('mapContainer', {
				// 	center: new TMap.LatLng(this.startLatLng[0], this.startLatLng[1]),//地图显示中心点
				// 	zoom:16	//缩放级别
				// });
				// map.center = new TMap.LatLng(this.startLatLng[0], this.startLatLng[1]);//地图显示中心点
				var coords = ret.result.routes[0].polyline, pl = [];
				//坐标解压（返回的点串坐标，通过前向差分进行压缩）
				var kr = 1000000;
				for (var i = 2; i < coords.length; i++) {
				  coords[i] = Number(coords[i - 2]) + Number(coords[i]) / kr;
				}
				//将解压后的坐标放入点串数组pl中
				for (var j = 0; j < coords.length; j += 2) {
				  pl.push(new TMap.LatLng(coords[j], coords[j+1]));
				}
				this.display_polyline(pl)//显示路线
				//标记起终点marker
				marker = new TMap.MultiMarker({ 
					id: 'marker-layer',
					map: map,
					styles: {
						"start": new TMap.MarkerStyle({
							"width": 25,
							"height": 35,
							"anchor": { x: 16, y: 32 },
							"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
						}),
						"end": new TMap.MarkerStyle({
							"width": 25,
							"height": 35,
							"anchor": { x: 16, y: 32 },
							"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
						})
					},
					geometries: [{
						"id": 'start',
						"styleId": 'start',
						"position": new TMap.LatLng(this.startLatLng[0], this.startLatLng[1])
					}, {
						"id": 'end',
						"styleId": 'end',
						"position": new TMap.LatLng(this.endLatLng[0], this.endLatLng[1])
					}]
				});
			},
			display_polyline(pl){
				//创建 MultiPolyline显示折线
				polylineLayer = new TMap.MultiPolyline({
					id: 'polyline-layer', //图层唯一标识
					map: map,//绘制到目标地图
					//折线样式定义
					styles: {
						'style_blue': new TMap.PolylineStyle({
							'color': '#3777FF', //线填充色
							'width': 8, //折线宽度
							'borderWidth': 5, //边线宽度
							'borderColor': '#FFF', //边线颜色
							'lineCap': 'round', //线端头方式
						})
					},
					//折线数据定义
					geometries: [
						{
							'id': 'pl_2',//折线唯一标识，删除时使用
							'styleId': 'style_blue',//绑定样式名
							'paths': pl
						}
					]
				});
				// polylineLayer
			},
			exchangeEvent() {
				let start = JSON.parse(JSON.stringify(this.startAddress ))
				let end = JSON.parse(JSON.stringify(this.endAddress ))
				this.startAddress = end
				this.endAddress = start
			},
			startEvent() {
				this.startAddress = ''
			},
			endEvent() {
				this.endAddress = ''
			},
			
		},
    }
</script>
<style lang="less" rel="stylesheet/less">
#mapPath {
	#mapContainer {
		width: 100%;
		height: 100%;
	}
	.map-view {
		position: absolute;
		top: 50px*@ratio;
		left: 20px*@ratio;
		width: 240px*@ratio;
		height: 75px*@ratio;
		z-index: 99999;
		
		.up-view {
			width: 100%;
			height: 60%;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: rgba(31,40,54, 0.8);
			img { width: 15px*@ratio; height: 15px*@ratio; margin-left: 5px*@ratio; }
			.input-view { width: 100%;
				.el-input {
					margin-left: 3%;
					width: 97%;
					height: 50%;
				}
				
			}
			.searchBtnEvent {
				// width: 100%;
				height: 100%;
			}
		}
		.bottom-view {
			width: 100%;
			height: 40%;
			background-color: #0f161f;
			color: #FFFFFF;
			font-size: 12px*@ratio;
			display: flex;
			align-items: center;
			padding: 0 10px*@ratio;
			.time {
				border-right: 1px*@ratio solid #2c3035;
				width: 1px*@ratio;
				height: 50%;
				margin: 0 20px*@ratio;
				// height: 100%;
				// align-items: center;
				// line-height: 100%;
			}
		}

	}
}
.el-input {
	
	font-size: 14px*@ratio!important;
}
.el-input-border {
	border-bottom: 1px*@ratio solid #0f161f;
}
.el-input--prefix .el-input__inner {
	padding-left: 20px*@ratio!important;;
}
.el-input__prefix_0 {
	color: #03ed80!important;
}
.el-input__prefix_1{
	color: #ef2223;
}
.el-input__inner {
	background-color: initial!important;
	border-radius: 4px@ratio!important;
	border: 0px solid #DCDFE6!important;
	color: #fff!important;
	font-size: 10px*@ratio!important;
	height: 20px*@ratio!important;
	line-height: 30px@ratio!important;
	padding: 0 15px@ratio!important;
}
.el-input__icon {
    width: 10px*@ratio!important;
    line-height: 20px*@ratio!important;
}
.el-input__suffix {
	right: 5px*@ratio!important;
}

</style>
